Links, Anker und Downloads

Letztes Update:

21. September 2023

Entwurf – Inhalt noch in Arbeit

Symbolbild

Wie hilft dieses Element den Nutzern?

Links, Downloads und Anker sind Verlinkungen die

  • optisch herausgehoben und dadurch Strukturpunkte die eher wahrgenommen werden – helfen den Nutzern bei der Orientierung
  • leiten den Nutzer zu weiteren Informationen

Wann kommt dieses Element zum Einsatz?

Links auf interne Seiten Links auf externe Seiten: Links führen dabei auf interne oder externe Seiten, weg von der Seite auf der sich der Nutzer gerade befindet.

Downloads sind Links auf Dokumente, die sich bei Klick öffnen bzw. Downloaden.

Anker führen den Nutzer zu weiteren Informationen auf der gleichen Seite auf der sich der Nutzer gerade befindet. Dies passiert indem die Seite bei Klick auf den Anker zum entsprechenden Inhalt scrollt.

Diese Informationen befinden sich jedoch an unterschiedlichen Stellen. Deshalb ist es besonders wichtig dass Nutzer erkennen können, um welche Form von Link es sich handelt.

Verlinkungen auf Seiten zeigen deren Relevanz. – daher sind Interne Verlinkungen auch wichtig für Seo


UX Konzeption

Alle Interaktionselemente müssen eindeutig erkennbar, leicht zugänglich und einfach zu nutzen sein.
Links müssen eine eindeutige optische Auszeichnung aufweisen die auch ohne Farbwahrnehmung oder Interaktion funktioniert. Eindeutige Erkennbarkeit muss auf allen Geräten gewährleistet sein (Achtung Mouseover). Diese Auszeichnung darf für keine anderen Elemente verwendet werden.

Der Unterschied zwischen Links auf interne Seiten, Links auf externe Seiten und Links die Dokumentendownload darstellen muss ersichtlich sein.

Der Zweck von Links muss über den Linktext und Link-Kontext klar erkennbar sein.

Broken Links: Es dürfen keine kaputten/broken Links auf den Plattformen aufzufinden sind.

Werden Bereiche mit mehreren Elementen verlinkt z.B. Teaser, muss eindeutig erkennbar sein welche Bereiche verlinkt sind und zusammengehören.

Links auf interne Seiten

Links auf externe Seiten

Öffnen immer in einem neuen Tab.
Werden durch ein eigenes Icon als Links auf externe Seiten gekennzeichnet

Links auf Dokumente bzw. Downloads

Bei verlinkten Dokumenten muss neben der oben genannten Auszeichnung ein Download-Icon, das Dateiformat und im Besten Fall auch die Dateigröße angegeben werden.

Strukturierte Daten / Schema.org

Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche

Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:

Weiterführendes zu Zugänglichkeit und Barrierefreiheit

Richtlinie für barrierefreie Webinhalte (WCAG)

Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.

Accessible Rich Internet Application (ARIA)

ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.


Detailliertere Informationen für vorliegendes Element:


UX-Writing

Links jeglicher Art bieten eine gute Möglichkeit dem Nutzer weiterführende / detailliertere Informationen zur Verfügung zu stellen, ohne die Kernbotschaft der jeweiligen Seite zu “verwässern”.

Nutzer bewerten die Nützlichkeit der Links bevor sie sie klicken – deshalb muss klar hervorgehen, welche Inhalte bzw welchen Nutzen die jeweiligen Links aufweisen.

Einsatz von Links in Short- und Longcopy sehr gut überlegen und reduzieren. Besser die Links am Ende des Sinnabschnittes gesammelt anbieten.

Was ist zu texten

  • Verlinkungen – Linktexte
  • Verlinkungen – Alternativ Texte
  • Downloads: Dokumenttitel

Wie ist zu texten

Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:

  • Grundsätzlich so wenige Worte wie möglich als Linktext verwenden
  • Bei Aufforderungen an den Nutzer im Lauftext wird der ganze Satz verlinkt – nicht nur Satzteile oder ein Wort daraus.
    Bei mehreren separaten Links in Lauftexten ist darauf zu achten dass diese weit genug getrennt platziert werden damit diese vom Nutzer unterschieden und mühelos gewählt werden können.
  • Textlinks sollen nur einzeilig sein
  • Wortbestandteile werden nicht verlinkt nur ganze Worte
  • Ideal: das wichtigste Wort am Beginn des Linktextes (Nein: “alle detaillierten Informationen zu unseren Reisen nach Kreta”; Ja: “Kreta bereisen im Detail”)
  • Textalternativen müssen vorhanden sein
  • keine generischen Teste verlinken wie z.B. “hier” “mehr”, “klicken Sie hier”, “weitere Infos”, “pdf”,…
  • Link-texte müssen klar verständlich bzw. erklärend sein und auf den Inhalt der verlinkten Seite/ Dokument hinweisen bzw. konkret erklären zu welcher Information sie führen.
  • Linktexte sollten im Wording ähnlich sein wie die Headline der verlinkten Seite / Inhalte (jeden Zweifel ausräumen dass sich der Nutzer bei den gesuchten Inhalten befindet)
  • Linktexte müssen auch ohne Kontext verständlich sein (Nutzer lesen oft nur Headlines und Linktexte)

Download von Dokumenten:

  • verlinkte Dateien müssen einen eindeutigen, beschreibenden Dateinamen aufweisen. Nicht verwendet werden dürfen Sonderzeichen und Leerzeichen.

keine Broken Links – Vertrauenswürdigkeit!!!

WCAG Prinzip Bedienbar: Richtlinie 2.4.4.: der Zweck von Links ist über Linktext und Link-Kontext erkennbar


UI-Design


Verhaltensregeln (Dos&Donts)


Positionierung und Abstände zu anderen Elementen


Verwendungsbeispiele


Hilfreiches

Ähnliche Elemente

Elemente und Komponenten


Nicht das passende gefunden?

Schreib´uns gerne Deine Inputs!

Was suchst du?